<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />

    <el-button type="primary" size="default" @click="print">点击打印</el-button>
    <div style="width: 100%; height: auto" id="printContent">
      <div class="center size-24 title">荣阳备料派工单(手工)</div>
      <table class="no-border">
        <tr>
          <td width="30%"></td>
          <td class="center size-16" width="30%">(打印日期:<span>printDate</span>)</td>
          <td class="size-16" width="30%">派工单号: <span>dispatchType</span></td>
        </tr>
      </table>

      <div class="headerTable">
        <table class="no-border">
          <tr>
            <td class="size-16 left">生产日期：dispatchDate</td>
            <td class="size-16 center">订单量：orderQtyStr</td>
            <td class="size-16 right">轮次：lsNoStr</td>
          </tr>
          <tr>
            <td class="size-16 left">操作员：workerName</td>
            <td class="size-16 center">派工人员：dispatchName</td>
            <td class="size-16 right">冲刀号：lotHead.cutNo</td>
          </tr>
          <tr>
            <td class="size-16 left">指令：lotNo</td>
            <td class="size-16 center">型体：style</td>
            <td class="size-16 right">颜色：color</td>
          </tr>
        </table>
      </div>
      <div class="mainTable">
        <table style="text-align: center; font-size: 16px; margin-top: 10px">
          <tr v-for="item in arr">
            <td class="size-16 left" v-for="item2 in item">{{ item2 }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TestModule'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const print = () => {
  const printWindow = window.open('', '_blank')
  const qrCodeContainer = document.querySelector('#printContent') as any
  printWindow!.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>打印指令领料作业</title>
          <link rel="stylesheet" type="text/css" href="print.css" media="print">
          <style>
            body, html {
              margin: 0;
              padding: 0;
            }
            @page {
              size: auto; 
              margin: 3mm;
            }
            @media print {
            }
            h2 {
              margin-left: initial; /* 或者设置适合打印的左边距 */
              page-break-inside: avoid; /* 避免在h2元素内部分页 */
            }
            .headerTable {
              height: auto;
              border: 0px solid #000;
              text-align: center;
              display: flex;
              margin: 20px 20px 0px;
              vertical-align: top;
            }
            .title {
              display: flex;
              justify-content: center;
              margin-bottom: 10px;
            }
            .center {
              text-align: center;
            }
            .right {
              text-align: right;
            }
            .left {
              text-align: left;
            }
            .no-padding {
              padding: 0;
            }
            .no-margin {
              margin: 0;
            }
            .margin-5 {
              margin: 5px;
            }
            .margin-top-5 {
              margin-top: 5px;
            }
            .margin-top-15 {
              margin-top: 15px;
            }
            .size-8 {
              font-size: 8px !important;
            }
            .size-10 {
              font-size: 10px;
            }
            .size-12 {
              font-size: 12px;
            }
            .size-14 {
              font-size: 14px;
            }
            .size-16 {
              font-size: 17px;
            }
            .size-18 {
              font-size: 18px;
            }
            .size-24 {
              font-size: 24px;
            }
            #date-tip {
              position: relative;
            }
            span.tip {
              display: inline-block;
              height: 14px;
              line-height: 14px;
              margin-right: 30px;
            }
            table {
              font-size: 10px;
              border-collapse: collapse;
              border-spacing: 0;
              border-collapse: collapse;
              border-spacing: 0;
              empty-cells: show;
              width: 100%;
            }
            table th,
            table td {
              border: 1px solid #000;
              font-size: 12px;
            }
            table.no-border,
            table.no-border th,
            table.no-border td {
              border: 0px;
            }
            table td.no-left-border {
              border-left: 0px;
            }
            table td.no-right-border {
              border-right: 0px;
            }
            .mainTable {
              margin: 0 20px;
            }
            /* 可以在这里添加更多自定义的打印样式 */
          </style>
        </head>
        <body>
    `)

  const cloneContainer = qrCodeContainer.cloneNode(true)
  printWindow!.document.body.appendChild(cloneContainer)

  printWindow!.document.write(`
        </body>
      </html>
    `)
  printWindow!.document.close()
  // 开始打印
  printWindow!.print()
}
const arr = ref([
  ['订单号码', 40, '片数', '合计'],
  ['订单号码', 40, '片数', '合计'],
  ['订单号码', 40, '片数', '合计']
])
const formList = ref([
  {
    type: 'select',
    selectValue: '',
    selectP: '类别',
    selectLabel: '',
    selectOptions: []
  },
  {
    type: 'input',
    inputPlaceholder: '请输入名称',
    inputValue: '',
    inputLabel: ''
  },
  {
    type: 'button',
    checkboxLabel: '重置'
  }
]) as any
</script>

<style lang="less" scoped>
.headerTable {
  height: auto;
  border: 0px solid #000;
  text-align: center;
  display: flex;
  margin: 20px 20px 0px;
  vertical-align: top;
}

.title {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.no-padding {
  padding: 0;
}

.no-margin {
  margin: 0;
}

.margin-5 {
  margin: 5px;
}

.margin-top-5 {
  margin-top: 5px;
}

.margin-top-15 {
  margin-top: 15px;
}

.size-8 {
  font-size: 8px !important;
}

.size-10 {
  font-size: 10px;
}

.size-12 {
  font-size: 12px;
}

.size-14 {
  font-size: 14px;
}

.size-16 {
  font-size: 17px;
}

.size-18 {
  font-size: 18px;
}

.size-24 {
  font-size: 24px;
}

#date-tip {
  position: relative;
}

span.tip {
  display: inline-block;
  height: 14px;
  line-height: 14px;
  margin-right: 30px;
}

table {
  font-size: 10px;
  border-collapse: collapse;
  border-spacing: 0;
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  width: 100%;
}

table th,
table td {
  border: 1px solid #000;
  font-size: 12px;
}

table.no-border,
table.no-border th,
table.no-border td {
  border: 0px;
}

table td.no-left-border {
  border-left: 0px;
}

table td.no-right-border {
  border-right: 0px;
}

.mainTable {
  margin: 0 20px;
}

// .img_out {
//   width: 100px;
//   height: 100px;
//   overflow: hidden;
// }

// .img_out img {
//   height: 120px;
//   width: 120px;
//   margin-left: -10px;
//   margin-top: -10px;
// }
</style>
